import { Flex, Tooltip } from 'antd';

import { useOffersCardStyles } from '../styles.tsx';

import type { MetadataList } from '../../../../../../types.ts';
import type { FC } from 'react';

interface ICardItemIconProps {
    listOfNFTs: MetadataList;
}
export const CardItemsIcon:FC<ICardItemIconProps> = ({ listOfNFTs }) => {
    const { styles } = useOffersCardStyles();
    return (
        <Flex gap={8} wrap="wrap" className={styles.cardsWrapper}>
            {
                listOfNFTs.map(NFT => (
                    <div key={NFT.tokenId + NFT.contract} className={styles.card}>
                        <Tooltip title={NFT.name !== 'нет имени' ? NFT.name : NFT.contract}>
                            <img src={NFT.img} alt={NFT.contract}/>
                        </Tooltip>
                    </div>
                ))
            }
        </Flex>
    );
};
